<template>
  <div class="main-container" :class="currentTheme">
    <el-container class="full-height">
      <!-- 侧边栏菜单 -->
      <el-aside
          :width="isCollapse ? '64px' : '200px'"
          class="side-menu"
      >
        <div class="menu-header">
          <h3 v-show="!isCollapse">欢迎</h3>
          <el-icon @click="toggleCollapse">
            <component :is="isCollapse ? 'Expand' : 'Fold'" />
          </el-icon>
        </div>

        <el-menu
            :default-active="activeMenu"
            :collapse="isCollapse"
            @select="handleMenuSelect"
        >
          <el-menu-item index="0">
            <el-icon><User /></el-icon>
            <span class="submenu-title">首页</span>
          </el-menu-item>
          <el-sub-menu index="1" :style="{ '--submenu-color': 'var(--main-color)' }">
            <template #title >
              <el-icon><Operation /></el-icon>
              <span class="submenu-title">功能菜单</span>
            </template>
            <el-menu-item index="1-1">
              <el-icon><User /></el-icon>
              <span class="submenu-title">文章管理</span>
            </el-menu-item>
            <el-menu-item index="1-2">
              <el-icon><Document /></el-icon>
              <span>联系人管理</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><Brush /></el-icon>
              <span>主题切换</span>
            </template>
            <el-menu-item
                v-for="theme in themes"
                :key="theme.value"
                @click="handleThemeChange(theme.value)"
            >
              <el-icon><component :is="theme.icon" /></el-icon>
              <span>{{ theme.label }}</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 主内容区域 -->
      <el-container>
        <el-header class="header">
          <el-dropdown @command="handleDropdown">
    <span class="el-dropdown-link">
      功能选择 <el-icon><ArrowDown /></el-icon>
    </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="calendar">日历</el-dropdown-item>
                <el-dropdown-item command="logout">登出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
<!--        <el-header class="header">-->
<!--          <div class="nav-buttons">-->
<!--            <el-button-group>-->
<!--              <el-button @click="changeMonth(-1)">上个月</el-button>-->
<!--              <el-button type="primary" @click="goToday">今天</el-button>-->
<!--              <el-button @click="changeMonth(1)">下个月</el-button>-->
<!--            </el-button-group>-->
<!--          </div>-->
<!--        </el-header>-->

<!--        <el-main class="content">-->
<!--          <h2 class="current-month">{{ currentMonth }}</h2>-->
<!--          <el-table :data="calendarData" class="calendar">-->
<!--            <el-table-column-->
<!--                v-for="(day, index) in days"-->
<!--                :key="index"-->
<!--                :label="day"-->
<!--                width="calc(100%/7)"-->
<!--            >-->
<!--              <template #default="{ row }">-->
<!--                <div class="cell" :class="{ 'current-day': row[index] === currentDay }">-->
<!--                  {{ row[index] }}-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </el-main>-->
        <el-main class="content">
          <router-view />
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import {
  Expand, Fold, Operation, User, Document, Brush,
  Sunny, Moon
} from '@element-plus/icons-vue'


import { useRouter } from 'vue-router'
const router = useRouter()


const handleDropdown = (command) => {
  if (command === 'calendar') {
    router.push('/homepage/rili')  // 如果你有日历子页面
  } else if (command === 'logout') {
    // 清理登录状态，比如 localStorage / token 等
    localStorage.clear()
    router.push('/menu') // 假设你有登录页
  }
}

const handleMenuSelect = (index) => {
  if (index === '0') {
    router.push('/homepage/shouye')
  } else if (index === '1-1') {
    router.push('/homepage/manage-file')
  }else if(index ==='1-2'){
    router.push('/homepage/manage-people')
  }
}

// 响应式布局
const isCollapse = ref(false)
const checkScreen = () => {
  isCollapse.value = window.innerWidth < 1000
}

onMounted(() => {
  checkScreen()
  window.addEventListener('resize', checkScreen)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', checkScreen)
})

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 主题管理
const currentTheme = ref('blue')
const themes = [
  { label: '蓝色风格', value: 'blue', icon: Moon },
  { label: '黄色风格', value: 'yellow', icon: Sunny }
]

const handleThemeChange = (theme) => {
  currentTheme.value = theme
}

</script>

<style scoped>
.submenu-title{
  color: var(--menu-text);
}

.full-height {
  height: 100vh;
  width: 100vw;
}

.main-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  --menu-bg: #304156;
  --menu-text: #bfcbd9;
  --menu-active: #409EFF;
}

.side-menu {

  background: var(--bg-color);
  transition: width 0.3s;
}

.menu-header {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: var(--menu-text);
  border-bottom: 1px solid rgba(255,255,255,0.1);

  h3 {
    margin: 0;
    flex: 1;
    white-space: nowrap;
  }

  .el-icon {
    cursor: pointer;
    font-size: 20px;
  }
}

.el-menu {
  border-right: none;
  background: var(--menu-bg);

  :deep(.el-menu-item),
  :deep(.el-sub-menu__title) {
    color: var(--menu-text);

    &:hover {
      background: rgba(255,255,255,0.1);
    }
  }

  :deep(.el-menu-item.is-active) {
    color: var(--menu-active);
  }
}

.header {
  display: flex;
  align-items: center;
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
}

.content {
  background: var(--bg-color);
}

.current-month {
  color: #181818;
  text-align: center;
  margin: 20px 0;
}

.cell {
  height: 80px;
  padding: 8px;
  border-radius: 4px;

  &.current-day {
    background: var(--main-color);
    color: white;
  }
}

/* 主题系统 */
.blue {
  --main-color:#c6e2ff;
  --bg-color: #c6e2ff;
  --border-color: #e4e7ed;
}

.yellow {
  --main-color: #E6A23C;
  --bg-color: #fdf6ec;
  --border-color: #f5dab1;
}

.header {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 保证右对齐 */
  padding: 0 20px;
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  height: 60px;
}

@media (max-width: 1000px) {
  .el-menu--collapse {
    width: 64px;

    :deep(.el-sub-menu) {
      & > .el-sub-menu__title {
        span, .el-sub-menu__icon-arrow {
          display: none;
        }
      }
    }
  }
}
</style>